<template>
	<view>
		<!-- 地址 -->
		<view class="address-section base-style">
			<view class="order-content">
				<view class="cen">
					<view class="top">
						<text class="set-address" v-if="!addressData.name"></text>
						<text class="name">{{addressData.name}}</text>
						<text class="mobile">{{addressData.mobile}}</text>
					</view>
					<text class="address">{{addressData.address}} {{addressData.area}}</text>
				</view>
			</view>
			<image class="a-bg" src="@/static/bg_line.png"></image>
		</view>
		<view class="goods-section base-style">
			<!-- 商品列表 -->
			<view v-for="item,index in orderInfo.detail" :key="index">
				<view class="g-item">
					<image :src="item.logo"></image>
					<view class="right">
						<text class="title clamp" style="font-size: 26rpx;padding-top: 20rpx;">{{ item.goods_name }}</text>
						<text class="spec" v-if="item.rule != 0">
							<text v-if="item.rule != 0">{{ item.rule.split('※').join(' ') }}</text>
						</text>
						<view class="price-box">
							<text class="price" style="color:#e93323">￥ {{ item.price }}</text>
							<text class="number">x {{ item.cart_num }}</text>
						</view>
					</view>
					<view class="left" style="font-size: 12px;color:#e93323;padding: 10rpx 30rpx;" v-if="item.apply_refund_num && item.refund_status == 1">
						{{ item.apply_refund_num }} 件退款中
					</view>
				</view>
				<view class="action-box b-t" v-if="orderInfo.pay_status == 2 || orderInfo.status == 6">
					<button class="action-btn" @click="refund(item)" v-if="orderInfo.pay_status == 2 && item.refunded_flag == 1 && orderInfo.refund_status == 1">申请退款</button>
					<button class="action-btn recom" @click="appraise(item)" v-if="orderInfo.status == 6 && item.user_comments == 1">去评价</button>
					<button class="action-btn recom" @click="appraise(item)" v-if="orderInfo.status == 6 && item.user_comments == 2">查看评价</button>
				</view>
			</view>
		</view>

		<view class="yt-list base-style">
			<view class="yt-list-cell">
				<text class="cell-tit clamp">下单编号:</text>
				<text class="cell-tip">{{ orderInfo.order_no }}</text>
			</view>
			<view class="yt-list-cell">
				<text class="cell-tit clamp">下单时间:</text>
				<text class="cell-tip">{{ orderInfo.create_time }}</text>
			</view>
			<view class="yt-list-cell">
				<text class="cell-tit clamp">支付状态:</text>
				<text class="cell-tip">{{ orderInfo.status_txt }}</text>
			</view>
		</view>
		
		<view class="yt-list base-style">
			<view class="yt-list-cell">
				<text class="cell-tit clamp">商品总价:</text>
				<text class="cell-tip">￥{{ orderInfo.order_price }}</text>
			</view>
			<view class="yt-list-cell">
				<text class="cell-tit clamp">配送运费:</text>
				<text class="cell-tip">￥{{ orderInfo.pay_postage }}</text>
			</view>
			<view class="yt-list-cell" v-if="couponOpen == 1">
				<text class="cell-tit clamp">优惠券抵扣:</text>
				<text class="cell-tip">-￥{{ orderInfo.coupon_amount }}</text>
			</view>
			<view class="yt-list-cell" v-if="userVipOpen == 1">
				<text class="cell-tit clamp">会员折扣:</text>
				<text class="cell-tip">-￥{{ orderInfo.vip_discount }}</text>
			</view>
			<view class="yt-list-cell" v-if="orderInfo.status != 2 && orderInfo.status != 3">
				<text class="cell-tit clamp"></text>
				<text class="cell-tip">实际支付:   <text class="real_pay">￥{{ orderInfo.pay_price }}</text></text>
			</view>
		</view>
		
		<view class="yt-list base-style" v-if="(orderInfo.status == 4 || orderInfo.status == 6) && goodsInfo.type == 1">
			<view class="yt-list-cell">
				<text class="cell-tit clamp">快递公司:</text>
				<text class="cell-tip">{{ orderInfo.delivery_name }}</text>
			</view>
			<view class="yt-list-cell">
				<text class="cell-tit clamp">快递单号:</text>
				<text class="cell-tip">{{ orderInfo.delivery_no }}</text>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="footer" v-if="!payBoxShow">
			<view class="price-content" v-if="orderInfo.status == 2 || orderInfo.status == 3">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ orderInfo.pay_price }}</text>
			</view>
			<view class="action-box b-t" v-if="orderInfo.status == 2">
				<button class="action-btn" @click="cancel()">取消订单</button>
				<button class="action-btn recom" @click="showPay(orderInfo)">立即支付</button>
			</view>
			<view class="action-box b-t" v-if="orderInfo.refund_status == 1 && orderInfo.detail.length > 1">
				<button class="action-btn" @click="refundAll()">批量退款</button>
			</view>
			<view class="price-content" v-if="orderInfo.status == 4"></view>
			<view class="action-box b-t" v-if="orderInfo.status == 4">
				<button class="action-btn" @click="express()" v-if="orderInfo.goods_type == 1">查看物流</button>
				<button class="action-btn recom" @click="received()">确认收货</button>
			</view>
		</view>
		
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" type="bottom">
				<view class="popup-content" style="height: 400px">
					<view class="yt-list">
						<text class="cell-tit clamp pay-way-title">选择支付方式</text>
						<uni-icons type="closeempty" size="32" class="close-btn" @click="closePayBox"></uni-icons>
					</view>
					<view class="yt-list" style="margin-top: 0;">
						<view class="yt-list-cell b-b pay-option" @click="changePayType('wechat_pay')" v-if="payWayConf.wechat_pay == 1">
							<view class="pay-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-weixinzhifu" size="28" color="#09bb07" class="icon-class"></uni-icons>
							</view>
							<view class="cell-tit clamp">
								<text>微信支付</text>
							</view>
							<label class="radio">
								<radio value="" color="#e93323" :checked="pay_way == 'wechat_pay'" /></radio>
							</label>
						</view>
						<view class="yt-list-cell b-b pay-option" v-if="canAlipay && payWayConf.alipay == 1" @click="changePayType('alipay')">
							<view class="pay-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-zhifubao" size="28" color="#00aaea" class="icon-class"></uni-icons>
							</view>
							<view class="cell-tit clamp">
								<text>支付宝</text>
							</view>
							<label class="radio">
								<radio value="" color="#e93323" :checked="pay_way == 'alipay'" /></radio>
							</label>
						</view>
						<view class="yt-list-cell b-b pay-option" @click="changePayType('balance')" v-if="payWayConf.balance_pay == 1">
							<view class="pay-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-jifen" size="28" color="#f90" class="icon-class"></uni-icons>
							</view>
							<view class="cell-tit clamp">
								<text>余额支付</text>
								<text class="balance-info">可用：￥{{balance}}</text>
							</view>
							<label class="radio">
								<radio value="" color="#e93323" :checked="pay_way == 'balance'" /></radio>
							</label>
						</view>
						<view class="pay-detail">支付：<text>￥</text><text>{{ order_price }}</text></view>
						<button type="default" class="do-appraise" @click="goPay">去付款</button>
					</view>
				</view>
			</uni-popup>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: 0,
				orderInfo: {},
				userVipOpen: 0,
				couponOpen: 0,
				payWayConf: {},
				canAlipay: false,
				payBoxShow: false,
				pay_way: 'wechat_pay',
				balance: 0,
				order_price: 0,
				addressData: {
					name: '',
					mobile: '',
					address: '',
					area: '',
					default: false,
				},
				goodsInfo: {}
			}
		},
		onLoad(option) {
			//#ifdef H5
			this.canAlipay = true
			//#endif
			//#ifdef APP-VUE
			this.canAlipay = true	
			//#endif
			
			this.orderId = option.id
			this.getConfig()
			this.getOrderInfo()
			this.getPayConfig()
		},
		methods: {
			// 获取支付配置
			async getPayConfig() {
				let res = await this.$api.order.getPayConf.get()
				this.payWayConf = res.data.config
				this.balance = res.data.balance
			},
			// 获取基础配置
			async getConfig() {
				let res = await this.$api.order.getConfig.get()
				this.userVipOpen = res.data.userVip
				this.couponOpen = res.data.coupon
			},
			// 展示支付方式
			showPay(item) {
				this.order_price = item.pay_price
				this.nowOrder = item
				this.payBoxShow = true
				
				this.$refs.popup.open()
			},
			changePayType(type){
				this.pay_way = type
			},
			// 关闭支付弹窗
			closePayBox() {
				this.payBoxShow = false
				this.$refs.popup.close()
			},
			// 订单信息
			async getOrderInfo() {
				let res = await this.$api.userOrder.detail.get({
					id: this.orderId
				});
				
				if (res.code == 0) {
					let order = res.data.order
					let address = order.address
					if (address) {
						this.addressData = {
							name: address.user_name,
							mobile: address.phone,
							address: address.province + address.city + address.county,
							area: address.detail
						}
					}
					
					this.orderInfo = order
					this.goodsInfo = res.data.goodsInfo
				} else {
					this.$tool.msg(res.msg);
				}
			},
			// 去付款
			async goPay() {
			
				let res = await this.$api.userOrder.goPay.post({
					order_id: this.nowOrder.id,
					pay_way: this.pay_way
				})
				
				if (res.code == 0) {
					let data = res.data
					let self = this
					
					if (this.pay_way == 'wechat_pay') {
						//#ifdef H5
						window.location.href = data
						//#endif
						// #ifdef APP-PLUS
						uni.getProvider({
						    service: 'payment',
						    success: function (payProvider) {
						        if (~payProvider.provider.indexOf('wxpay')) {
						            uni.requestPayment({
						                "provider": "wxpay",
						                "orderInfo": {
											"appid": data.appId,
											"partnerid": data.partnerid,
											"prepayid": data.prepayid,
											"package": "Sign=WXPay",
											"noncestr": data.nonceStr,
											"timestamp": data.timeStamp,
											"sign": data.sign
										}, 
						                success: function (payRes) {
						                    self.$tool.msg('支付成功');
						                    uni.redirectTo({
						                    	url: '/pages/money/result?order_no=' + res.msg
						                    })
						                },
						                fail: function (err) {
						                    self.$tool.msg('支付失败');
						                    uni.redirectTo({
						                    	url: '/pages/money/result?order_no=' + res.msg
						                    })
						                }
						            });
						        }
						    }
						});
						// #endif
						//#ifdef MP
						uni.requestPayment({
						    "provider": "wxpay", 
						    "appId": data.appId,
							"timeStamp": data.timeStamp,
							"nonceStr": data.nonceStr,
							"package": data.package,
							"signType": data.signType,
							"paySign": data.paySign,
						    success(data) {
								self.$tool.msg('支付成功');
								uni.redirectTo({
									url: '/pages/money/result?order_no=' + res.msg
								})
							},
						    fail(e) {
								self.$tool.msg('支付失败');
								uni.redirectTo({
									url: '/pages/money/result?order_no=' + res.msg
								})
							}
						})
						//#endif
					} else if (this.pay_way == 'alipay') {
						//#ifdef H5
						document.querySelector('body').innerHTML = data
						document.forms[0].submit()
						//#endif
						// #ifdef APP-PLUS
						uni.getProvider({
						    service: 'payment',
						    success: function (payProvider) {
						        if (~payProvider.provider.indexOf('alipay')) {
						            uni.requestPayment({
						                "provider": "alipay",
						                "orderInfo": data,
						                success: function (payRes) {
						                    self.$tool.msg('支付成功');
						                    uni.redirectTo({
						                    	url: '/pages/money/result?order_no=' + res.msg
						                    })
						                },
						                fail: function (err) {
						                    self.$tool.msg('支付失败');
						                    uni.redirectTo({
						                    	url: '/pages/money/result?order_no=' + res.msg
						                    })
						                }
						            });
						        }
						    }
						});
						// #endif
					} else { // 余额支付
						if (res.code == 0) {
							self.$tool.msg('支付成功');
							uni.redirectTo({
								url: '/pages/money/result?order_no=' + res.msg
							})
						} else {
							this.$tool.msg(data.msg, 3000);
						}
					}
					
				} else {
					this.$tool.msg(res.msg);
				}
			},
			// 去评价
			appraise(item) {
				uni.navigateTo({
					url: `/pages/order/appraise?order_id=${item.order_id}&order_detail_id=${item.id}`,
				})
			},
			// 退款
			refund(item) {
				let orderNumData = []
				orderNumData.push({
					order_detail_id: item.id,
					num: item.cart_num
				})
				
				uni.setStorage({
					key: 'REFUND_ORDER',
					data: JSON.stringify({ 
							order_id: item.order_id,
							order_detail_id: item.id,
							order_num_data: orderNumData
						})
				})
				
				uni.navigateTo({
					url: `/pages/refund/refund`
				})
			},
			// 取消订单
			async cancel() {
				uni.showLoading({
					title: '处理中'
				});
				let res = await this.$api.userOrder.cancel.get({
					id: this.orderId
				})
				uni.hideLoading()
				if (res.code == 0) {
					this.$tool.msg(res.msg);
					setTimeout(() => {
						uni.$emit('refreshData');
						uni.navigateBack(1)
					}, 800)
				} else {
					this.$tool.msg(res.msg);
				}
			},
			// 物流详情
			express() {
				uni.navigateTo({
					url: `/pages/order/express?order_id=` + this.orderId
				})
			},
			// 申请全部退款
			refundAll() {
				uni.navigateTo({
					url: `/pages/refund/select?order_id=` + this.orderId
				})
			},
			// 确认收货
			async received() {
				uni.showLoading({
					title: '处理中'
				});
				let res = await this.$api.userOrder.received.get({id: this.orderId})
				uni.hideLoading()
				if (res.code == 0) {
					this.$tool.msg(res.msg);
					this.getOrderInfo()
				} else {
					this.$tool.msg(res.msg);
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
		padding-bottom: 120upx;
	}
	
	.set-address {
		margin-left: 30px;
		font-size: 32rpx;
		color: #606266;
		font-weight: 500;
	}
	
	.address-section {
		padding: 40upx 0;
		background: #fff;
		position: relative;
		border-radius: 16upx;
		margin: 20upx 24upx 0;
		overflow: hidden;
		border: 1px solid #f0f0f0;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			width: 90%;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
			margin-left: 30px;
			font-weight: 600;
			color: #303133;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			margin-left: 30px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			color: $font-color-light;
			line-height: 1.4;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 4upx;
			background: linear-gradient(90deg, #e93323, #ff6b6b);
		}
	}

	.goods-section {
		margin-top: 20upx;
		background: #fff;
		padding-bottom: 1px;
		border-radius: 16upx;
		margin: 20upx 24upx 0;
		overflow: hidden;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
			border-bottom: 1px solid #f0f0f0;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 24upx 30upx;
			padding: 20upx;
			background: #fafafa;
			border-radius: 12upx;
			transition: all 0.3s ease;
			border: 1px solid #f0f0f0;
			position: relative;

			&:active {
				transform: scale(0.98);
				background: #f5f5f5;
			}

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 8upx;
				transition: transform 0.3s ease;
				
				&:active {
					transform: scale(0.95);
				}
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
				font-weight: 500;
				line-height: 1.4;
			}

			.spec {
				color: $font-color-light;
				font-size: 24upx;
				margin-top: 8upx;
				background: #f0f0f0;
				padding: 4upx 8upx;
				border-radius: 4upx;
				display: inline-block;
			}

			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 16upx;

				.price {
					font-weight: 600;
					color: #e93323;
					font-size: 34upx;
				}
				
				.number{
					font-size: 26upx;
					color: $font-color-base;
					background: #f0f0f0;
					padding: 4upx 12upx;
					border-radius: 12upx;
				}
			}

			.step-box {
				position: relative;
			}
			
			.left {
				position: absolute;
				top: 10upx;
				right: 30upx;
				font-size: 24upx;
				color: #e93323;
				padding: 6upx 12upx;
				background: #fff5f5;
				border-radius: 8upx;
				border: 1px solid #ffe0e0;
			}
		}
		
		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 20upx 30upx;
			border-top: 1px solid #f0f0f0;
			background: #fafafa;
		}
	}
	
	.yt-list {
		margin-top: 20upx;
		background: #fff;
		border-radius: 16upx;
		margin: 20upx 24upx 0;
		overflow: hidden;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		line-height: 50upx;
		position: relative;
		transition: background-color 0.3s ease;

		&.cell-hover {
			background: #f8f8f8;
		}

		&.b-b:after {
			left: 30upx;
			right: 30upx;
			border-color: #f0f0f0;
		}

		.cell-icon {
			height: 36upx;
			width: 36upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
			background: linear-gradient(135deg, #ff6b6b, #e93323);
			border-radius: 8upx;
			margin-right: 16upx;
			font-weight: 500;

			&.hb {
				background: linear-gradient(135deg, #ffc107, #ff9800);
			}

			&.lpk {
				background: linear-gradient(135deg, #4caf50, #2e7d32);
			}
		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 28upx;
			color: #606266;
			margin-right: 10upx;
			font-weight: 500;
		}

		.cell-tip {
			font-size: 28upx;
			color: #303133;
			font-weight: 500;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: #e93323;
			}
			
			&.red{
				color: #e93323;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
			background: #f8f8f8;
			padding: 12upx 16upx;
			border-radius: 8upx;
			border: 1px solid #f0f0f0;
		}
	}
	
	/* 支付列表 */
	.pay-list{
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;
		border-radius: 16upx;
		overflow: hidden;
		
		.pay-item{
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
			transition: background-color 0.3s ease;
			
			&:active {
				background: #f8f8f8;
			}
		}
		
		.icon-weixinzhifu{
			width: 80upx;
			font-size: 40upx;
			color: #09bb07;
		}
		
		.icon-alipay{
			width: 80upx;
			font-size: 40upx;
			color: #00aaea;
		}
		
		.icon-xuanzhong2{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: #e93323;
		}
		
		.tit{
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
			font-weight: 500;
		}
	}
	
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		border-top: 1px solid #f0f0f0;
		
		.price-content{
			padding-left: 30upx;
			display: flex;
			align-items: center;
		}
		
		.price-tip{
			color: #e93323;
			margin-left: 8upx;
			font-weight: 500;
		}
		
		.price{
			font-size: 38upx;
			color: #e93323;
			font-weight: 600;
		}
		
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background: linear-gradient(135deg, #ff6b6b, #e93323);
			font-weight: 500;
			letter-spacing: 2upx;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
	
	.action-box{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100upx;
		position: relative;
		padding-right: 30upx;
	}
	
	.action-btn{
		width: 160upx;
		height: 64upx;
		margin: 0;
		margin-left: 24upx;
		padding: 0;
		text-align: center;
		line-height: 64upx;
		font-size: 28upx;
		color: #606266;
		background: #fff;
		border-radius: 32upx;
		border: 1px solid #dcdfe6;
		transition: all 0.3s ease;
		font-weight: 500;
		
		&:active {
			transform: scale(0.95);
		}
		
		&.recom{
			background: linear-gradient(135deg, #ff6b6b, #e93323);
			color: #fff;
			border: none;
			
			&:active {
				transform: scale(0.95);
				opacity: 0.9;
			}
		}
	}
	
	.real_pay {
		color: #e93323 !important;
		font-weight: 700;
		margin-left: 10px;
		font-size: 32upx !important;
	}
	
	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		line-height: 50upx;
		position: relative;
	}
	
	.yt-list-cell .cell-tit{
		flex: 1;
		font-size: 28upx;
		color: #606266;
		margin-right: 10upx;
		font-weight: 500;
	}
	
	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
	
	radio {
		transform:scale(0.8);
	}
	
	.icon-class {
		color: $icon-color;
	}
	
	.pay-way-title {
		font-size: 32upx;
		padding: 24upx 0upx 16upx 30upx;
		color: #303133;
		font-weight: 600;
		border-bottom: 1px solid #f0f0f0;
		width: 100%;
	}
	
	.close-btn {
		color: #909399 !important;
		font-size: 32upx;
		position: absolute;
		right: 30upx;
		top: 24upx;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;
		
		&:active {
			background: #f0f0f0;
		}
	}
	
	.pay-detail {
		text-align: center;
		margin-top: 20upx;
		font-size: 28upx;
		color: #606266;
		padding: 20upx 0;
		background: #fafafa;
		border-radius: 12upx;
		margin: 0 30upx;
		
		text {
			color: #e93323;
			font-size: 36upx;
			font-weight: 600;
			margin-left: 8upx;
		}
	}
	
	.do-appraise {
		width: 90% !important;
		background: linear-gradient(135deg, #ff6b6b, #e93323) !important;
		color: #fff !important;
		margin-top: 20upx !important;
		font-size: 32upx !important;
		height: 80upx !important;
		line-height: 80upx !important;
		border-radius: 40upx !important;
		font-weight: 500 !important;
		letter-spacing: 2upx !important;
		transition: all 0.3s ease !important;
		
		&:active {
			transform: scale(0.98) !important;
			opacity: 0.9 !important;
		}
	}
	
	.popup-content {
		border-radius: 24upx 24upx 0 0 !important;
		overflow: hidden;
		
		.yt-list {
			margin: 0;
			border-radius: 0;
		}
	}
	
	.base-style {
		border-radius: 16upx;
		margin: 20upx 24upx 0;
		overflow: hidden;
	}
	
	.pay-option {
		padding: 24upx 30upx;
		transition: background-color 0.3s ease;
		
		&:active {
			background-color: #f8f8f8;
		}
		
		.pay-icon-wrapper {
			width: 56upx;
			height: 56upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f8f8f8;
			border-radius: 12upx;
			margin-right: 20upx;
		}
		
		.cell-tit {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			
			text {
				font-size: 28upx;
				color: #303133;
				font-weight: 500;
			}
			
			.balance-info {
				font-size: 24upx;
				color: #e93323;
				margin-top: 8upx;
				font-weight: 500;
			}
		}
		
		.radio {
			margin-left: auto;
		}
	}
</style>
